/* components/OrderCard/OrderCard.less */

// 定义一些常用变量
@primary-color: #19be6b; // TDesign默认主色
@success-color: #19be6b; // 绿色
@text-dark: #333;
@text-normal: #666;
@text-light: #999;
@border-radius-base: 16rpx;
@padding-base: 24rpx;

.order-card-container {
  margin: @padding-base;
  border-radius: @border-radius-base;
  overflow: hidden;
}
.img-info{
	margin: 20rpx 10rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx @padding-base;
  background-color: #19be6b; // 浅蓝色背景，带透明度
  opacity: .8;
  color: #fff;
  font-size: 24rpx;


  .header-right {
    display: flex;
    align-items: center;

    .order-time {
      margin-right: 10rpx;
    }
  }
}

.main-content {
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(255, 255, 255, 0.8);
  padding: @padding-base;

  .address-weight {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;

    .address {
      flex: 1;
      font-size: 36rpx;
      font-weight: bold;
      color: @text-dark;
      line-height: 1.3;
      margin-right: 20rpx; // 避免和右侧文字太近
    }

    .weight-box {
      text-align: right;

      .weight-num {
        font-size: 36rpx;
        font-weight: bold;
        color: #303133; // 指定颜色
      }
    }
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap; // 允许标签换行
    margin-bottom: 20rpx;

    .t-class-tag {
      margin-right: 12rpx; // 标签间距
      margin-bottom: 12rpx; // 标签间距
      font-size: 24rpx; // 调整标签字体大小
      padding: 6rpx 16rpx; // 调整标签内边距
      border-radius: 8rpx;
    }
  }

  .other-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: @text-normal;
    margin-bottom: 30rpx;

    .dispatcher {
      letter-spacing: 2rpx;
      line-height: 1.5;
      color: #303133;
      flex: 1;
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx; // 增加与上方内容的间距
    border-top: 1rpx solid #eee; // 分隔线

    .contact-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: @text-normal;
      padding: 0 10rpx;

      .btn-text {
        font-size: 22rpx;
        margin-top: 5rpx;
      }
    }

    .div {
      height: 60rpx;
      width: 1rpx;
      margin: 0 20rpx;
      background-color: #eee;
    }

    .slider-wrapper {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .slider-container {
      position: relative;
      width: 100%; // 占满剩余空间
      height: 80rpx; // 滑动轨道高度
      background-color: #ebedef; // 轨道初始背景色
      border-radius: 10rpx;
      overflow: hidden;
      display: flex;
      align-items: center; // 垂直居中内容
      transition: background-color 0.3s ease-in-out; // 轨道背景色过渡

      &.is-completed {
        background-color: @success-color; // 完成后的背景色
      }

      .slider-track-active {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background-color: @success-color; // 轨道主动部分颜色
        transition: width 0.3s ease-out; // 宽度过渡
        z-index: 0;
      }

      .slider-text {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 28rpx;
        color: @text-normal;
        z-index: 1; // 确保文字在轨道之上，滑块之下
        transition: color 0.3s ease-in-out;

        &.is-completed {
          color: #fff; // 完成后文字颜色
        }
      }

      .slider-handle {
        position: absolute;
        width: 60rpx; // 小方块宽度
        height: 60rpx; // 小方块高度
        background-color: #fff;
        border-radius: 10rpx; // 圆形
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        left: 10rpx; // 初始位置距离左边一点间距
        transition: transform 0.3s ease-out; // 弹回动画
        z-index: 2; // 确保滑块在文字之上

      }
    }

    .actions-left {
      display: flex;
      align-items: center;

      .contact-btn {

        // 给按钮之间增加间距
        &:not(:last-child) {
          margin-right: 40rpx;
        }
      }
    }

    .actions-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .resolve-btn {
        // 覆盖 button 默认样式
        margin: 0;
        padding: 0 40rpx;
        line-height: 80rpx;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        background-color: @primary-color;
        border-radius: 10rpx;

        // 移除button默认边框
        &::after {
          border: none;
        }
      }
    }
  }
}